<template>
  <view class="view-check-list">
    <view class="view-check">
      <Detail :detaiData="detaiData"></Detail>
      <view class="hidden-title">{{ detaiData.status === '1' ? '停电' : '送电' }}审核</view>
      <view class="background-white">
        <uni-forms ref="form" :modelValue="formData" :rules="rules" labelWidth="120px" labelPosition="top">
          <cu-cell-group>
            <uni-forms-item name="result">
              <cu-cell-select
                v-model="formData.result"
                :list="listData"
                labelKey="name"
                valueKey="id"
                title="审核结果"
                placeholder="请选择审核结果"
                link
                required
              ></cu-cell-select>
            </uni-forms-item>
            <uni-forms-item name="stopUserId" v-if="formData.result == 'Y'">
              <cu-cell
                :title="detaiData.status === '1' ? '停电人' : '送电人'"
                required
                link
                placeholder="选择人员"
                :description="formData.chargePersonName"
                @click="handlePersonClick()"
              ></cu-cell>
            </uni-forms-item>
          </cu-cell-group>
          <view class="form-container">
            <view class="background-white" v-if="formData.result == 'N'">
              <uni-forms-item name="remark" label="不通过意见：" label-width="200px">
                <textarea
                  required
                  v-model="formData.remark"
                  class="text-area"
                  placeholder="输入不通过意见"
                  maxlength="50"
                />
              </uni-forms-item>
            </view>
          </view>
        </uni-forms>
      </view>
    </view>
    <view class="submit-group">
      <button class="u-button u-button-danger block" :ripple="true" @click="transfer">转办</button>
      <button class="u-button block" :ripple="true" @click="submit">提交</button>
    </view>
    <user-selector ref="userSelectorRef" @change="onUserSelectorChange"></user-selector>
    <data-picker
      ref="transfer"
      title="转办人员"
      label-key="name"
      value-key="staffUserId"
      :data="transferUserList"
      @confirm="transferConfirm"
    ></data-picker>
  </view>
</template>
<script>
import Detail from './components/detail.vue'
import CuCellGroup from '@/components/cu-cell/cu-cell-group.vue'
import CuCellSelect from '@/components/cu-cell/cu-cell-select.vue'
import DataPicker from '@/components/data-picker/index.vue'
import { getElectricDetail, stopCheck, startCheck, checkUserTransfer, transmit } from '@/api/spw/powerCut.js'
import UserSelector from '@/components/user-selector/index.vue'
export default {
  components: {
    Detail,
    CuCellGroup,
    CuCellSelect,
    UserSelector,
    DataPicker
  },
  onNavigationBarButtonTap() {
    uni.navigateTo({
      url: '/pages/jobSlip/power-cut/approveRecord?ticketId=' + this.ticketId
    })
  },
  data() {
    return {
      ticketId: '',
      detaiData: {},
      transferUserList: [],
      formData: {
        ticketId: '',
        result: 'Y',
        remark: '',
        stopUserId: '',
        startUserId: '',
        stopTicketType: '',
        startTicketType: '',
        chargePersonName: ''
      },
      listData: [
        {
          id: 'Y',
          name: '通过'
        },
        {
          id: 'N',
          name: '不通过'
        }
      ],
      rules: {
        result: {
          rules: [
            {
              required: true,
              errorMessage: '不能为空'
            }
          ]
        },
        stopUserId: {
          rules: [
            {
              required: true,
              errorMessage: '不能为空'
            }
          ]
        },
        remark: {
          rules: [
            {
              required: true,
              errorMessage: '不能为空'
            }
          ]
        }
      }
    }
  },
  onLoad(option) {
    this.ticketId = option.ticketId
    this.formData.ticketId = this.ticketId
    getElectricDetail(this.ticketId).then(({ data }) => {
      this.detaiData = data
      this.formData.stopTicketType = this.detaiData.stopTicketType
      this.formData.startTicketType = this.detaiData.startTicketType
      uni.setNavigationBarTitle({
        title: this.detaiData.status === '1' ? '停电审核' : '送电审核'
      })
    })
  },
  methods: {
    transfer() {
      checkUserTransfer({
        currentUserIds: this.detaiData.currentUserIds
      }).then(({ data }) => {
        this.transferUserList = data
      })
      this.$refs.transfer.open()
    },
    transferConfirm(obj) {
      if (!obj || !obj.value) {
        this.$modal.showToast('还未选择转本人员')
        return
      }
      let data = {
        ticketId: this.formData.ticketId,
        userIds: [obj.value]
      }
      transmit(data).then(() => {
        this.$modal.showToast('转办成功')
        uni.navigateBack()
      })
    },
    handlePersonClick() {
      this.$refs.userSelectorRef.open()
    },
    /**
     * 人员选择事件
     */
    onUserSelectorChange({ name, value }) {
      this.formData.stopUserId = value
      this.formData.chargePersonName = name
    },
    submit() {
      this.$refs.form.validate().then((res) => {
        if (res) {
          if (this.formData.result === '2' && !this.formData.remark) {
            this.$modal.showToast('意见不能为空')
            return
          }
          let fn = stopCheck
          if (this.detaiData.status == '6') {
            this.formData.startUserId = this.formData.stopUserId
            fn = startCheck
          }
          fn.call(null, this.formData).then((response) => {
            this.$modal.showToast('提交成功')
            uni.navigateBack()
          })
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.view-check-list {
  .view-check {
    margin-bottom: 120px;
  }

  .hidden-title {
    background: #f5f5f5;
    padding: 20rpx 30rpx;
    color: #999;
  }

  .background-white {
    background-color: #fff;
  }
}
</style>
